<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>注册事件</button>

    <ul>
        <li>点击我会有弹窗</li>
        <li>点击我会有弹窗</li>
        <li>点击我会有弹窗</li>
    </ul>

    <ol>
        <li>事件三要素：事件源，事件类型，事件处理程序</li>
        <li>javascript中的常用事件有：1、点击事件（onclick和ondblclick）；2、焦点事件（onblur和onfocus）；3、加载事件（onload）；
            4、鼠标事件；5、键盘事件；6、选择和改变事件；7、表单事件。
        </li>
        <li>排他思想(在一组元素中，只给某一个元素添加样式)：1.所 有元素全部清除样式。2.给当前元素设置样式。3.两者不能颠倒，先清除再重新设置</li>
        <li>自定义属性操作：（1）element.getAttribute('属性名')  ：获取自定义的属性；（2）element.setAttribute('属性名','值')  :设置自定义属性；</li> 
        <li>方法监听注册方式：addEventListener();<br>特点：同一个元素可注册不同的事件；<br>用法：目标对象.addEventListener(type,listener,[useCapture]);<br>
            type:事件型字符串，例如click，mouseover等；<br>listener:事件处理函数；<br>useCapture：可选参数，默认为布尔值为false
        </li>
        <li>删除事件：removeEventListener('事件类型',函数名)</li>
        <li>Dom事件流：先从document依次向下捕获到要执行的事件，找到后执行完毕，再经冒泡阶段依次到document</li>
        <li>事件对象会写在侦听函数的小括号内当形参来看，事件对象只有有了事件才会存在。<br>事件对象是事件的一系列跟事件相关的数据的集合，比如鼠标点击中就包含了鼠标的坐标等信息</li>
        <li>事件对象常见的属性和方法：<br>
            e.target:返回触发事件的对象；<br>e.type:返回事件的类型；<br>e.preventDefault():阻止默认事件，例如不让链接跳转；<br>e.stopPropagation():阻止冒泡
        </li>
        <li>e.target与this的区别：前者返回的是触发事件的对象（元素），即：点击了谁就返回谁；后者返回的是绑定事件的对象（元素），即:谁绑定了事件，就返回谁</li>
        <li>事件委托原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响每个子节点</li>
    </ol>
    <script>
        var btn = document.querySelector('button');
        function fn(event) {
            alert('第二次点击不会触发了');
            btn.removeEventListener('click', fn);
            console.log(event);
        }
        btn.addEventListener('click', fn);


        var ul = document.querySelector('ul');
        ul.addEventListener('click', function () {
            confirm('我弹出来了')
        })
    </script>
</body>

</html>